<template>
  <el-row class="detail-row">
    <el-card class="detail-card">
      <Title title="订单信息" style="margin-bottom:18px;"/>
      <el-form style="padding-left: 12px;">
        <el-col :span="24">
          <el-col v-if="detailInfo && detailInfo.auditorUser" :span="10">
            <el-form-item label="审批人：">
              <span>{{ detailInfo.auditorUser || '--' }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="detailInfo && detailInfo.auditorUser" :span="10">
            <el-form-item label="审批时间：">
              <span>{{ detailInfo.auditorTime | format('YYYY-MM-DD HH:mm:ss') }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="isProject" :span="10">
            <el-form-item label="项目类型：">
              <span v-if="orderInfo">{{ orderInfo.projectTypeStr || '--' }}</span>
              <span v-else>{{ orderInfo.projectTypeStr || '--' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="销售：">
              <span v-if="clientInfo">{{ clientInfo.market || '--' }}</span>
              <span v-else>{{ orderInfo.market || '--' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="策划执行人：">
              <span v-if="clientInfo">{{ clientInfo.mastermind || '--' }}</span>
              <span v-else>{{ orderInfo.mastermind || '--' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="订单编号：">
              <span>{{ orderInfo.orderId || '--' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="创建时间：">
              <span>{{ orderInfo.createTime | standardFormat }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="创建人：">
              <span>{{ orderInfo.createName || '--' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="下单日期：">
              <span>{{ orderInfo.orderTime | standardFormatNoHour }}</span>
            </el-form-item>
          </el-col>
          <el-col v-if="!isProject" :span="10">
            <el-form-item label="订单类型：">
              <span
                v-if="!orderInfo.originalOrder"
              >{{ orderInfo.orderType | orderTypeStatusFilter }}</span>
              <span v-else>
                {{ orderInfo.orderType | orderTypeStatusFilter }}(原订单：
                <router-link
                  :to="{name: 'orderDetail', params: { orderId: orderInfo.originalOrderId }}"
                  target="_blank"
                  class="original-order"
                >{{ orderInfo.originalOrder }}</router-link>)
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="刊例价：">
              <span v-if="orderInfo.articlesPrice">{{ (orderInfo.articlesPrice / 100) | moneyFilter }}</span>
              <span v-else-if="orderInfo.articlesPrice === 0">0</span>
              <span v-else>--</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="折扣：">
              <span v-if="orderInfo.discountPrice">{{ orderInfo.discountPrice | moneyFilter }}</span>
              <span v-else-if="orderInfo.discountPrice === 0">0</span>
              <span v-else>--</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="含税金额：">
              <span v-if="orderInfo.taxAmount">{{ (orderInfo.taxAmount / 100) | moneyFilter }}</span>
              <span v-else-if="orderInfo.taxAmount === 0">0</span>
              <span v-else>--</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="策划价：">
              <span v-if="orderInfo.planPrice">{{ (orderInfo.planPrice / 100) | moneyFilter }}</span>
              <span v-else-if="orderInfo.planPrice === 0">0</span>
              <span v-else>--</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="渠道价：">
              <span v-if="orderInfo.channelPrice">{{ (orderInfo.channelPrice / 100) | moneyFilter }}</span>
              <span v-else-if="orderInfo.channelPrice === 0">0</span>
              <span v-else>--</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="收入类型：">
              <span v-if="orderInfo.incomeTypeStr">{{ orderInfo.incomeTypeStr || '--' }}</span>
              <span v-else-if="orderInfo.incomeTypeStr === 0">{{ orderInfo.incomeTypeStr }}</span>
              <span v-else>--</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="结算基数：">
              <span v-if="orderInfo.priceBase">{{ (orderInfo.priceBase / 100) | moneyFilter }}</span>
              <span v-else-if="orderInfo.priceBase === 0">0</span>
              <span v-else>--</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="订单来源：">
              <span v-if="orderInfo.orderSource">{{ orderInfo.orderSource === 1?'飞博招商':'达人个人引进' }}</span>
              <span v-else>--</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="终端品牌：">
              <span>{{ orderInfo.terminalType || '--' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="IP形象：">
              <div style="display: flex;">
                <el-tooltip v-if="orderInfo.ipName" class="item" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ orderInfo.ipName }}</div>
                  <div class="ellipsis" style="max-width:100%;display:inline-block;">{{ orderInfo.ipName }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="订单分类：">
              <span>{{ orderInfo.orderKindName || '--' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="品牌名称：">
              <div style="display: flex;">
                <el-tooltip v-if="orderInfo.theme" class="item" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ orderInfo.theme }}</div>
                  <div class="ellipsis" style="max-width:100%;display:inline-block;">{{ orderInfo.theme }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </div>
            </el-form-item>
          </el-col>
          <!-- 销售无法查看下单链接 -->
          <el-col :span="10">
            <el-form-item label="文案内容：">
              <div style="display: flex;">
                <el-tooltip v-if="orderInfo.content" class="item" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ orderInfo.content }}</div>
                  <div class="ellipsis" style="max-width:100%;display:inline-block;">{{ orderInfo.content }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="备注：">
              <div style="display: flex;">
                <el-tooltip v-if="orderInfo.remark" class="item" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ orderInfo.remark }}</div>
                  <div class="ellipsis" style="max-width:100%;display:inline-block;">{{ orderInfo.remark }}</div>
                </el-tooltip>
                <div v-else>--</div>
              </div>
            </el-form-item>
          </el-col>
        </el-col>
      </el-form>
    </el-card>
  </el-row>
</template>

<script>
import { standardFormat, standardFormatNoHour, format } from '@/filters/date';
import {
  orderTypeStatusFilter,
  setAccountState,
  setReviewState,
  setSealBillType,
  setPayWay
} from '@/filters/status';
import ResourceInfo from '@/components/ResourceInfo';
import { moneyFilter } from '@/filters/number';
import Title from '@/components/Title';
import FileShowList from '@/components/CreateOrder/fileShowList';
import platformIcon from '@/components/Common/platformIcon';
export default {
  components: { Title, FileShowList, platformIcon, ResourceInfo },
  filters: {
    standardFormat,
    setAccountState,
    format,
    standardFormatNoHour,
    orderTypeStatusFilter,
    setReviewState,
    setSealBillType,
    setPayWay,
    moneyFilter,
    cooperation: (data) => {
      if (!data || data.length === 0) return '--';
      return data.map(i => i.name).join(',');
    }
  },
  props: {
    orderInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    detailInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isProject: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    clientInfo() {
      return this.detailInfo ? this.detailInfo.clientInfo : {};
    },
    orderStatus() {
      // 订单状态： 0: 草稿中 1: 待发布 2: 待核算 3: 待审批 4: 待封账 5: 封账中 6: 已封账 7: 已完成
      return this.detailInfo.orderStatus || '';
    }
  },
  methods: {
    setOrderOperator(data) {
      if (!data || data.length === 0) return '--';
      const name = data.map(i => i.userName);
      return name.join(',');
    }
  }
};
</script>
<style lang="scss" scoped>
.FileShowList {
  ::v-deep .el-form-item__label {
    flex-shrink: 0;
  }
}

</style>

